<template>
  <div class="w-100 h-100">
    <div style="font-size: 20px">
      <img src="../../../../assets/image/jianshe/title.png" alt="" />
      污水再生利用率
    </div>
    <div class="w-100 h-10 d-flex justify-content-end">
      <lineLabel
        shapeColor="rgba(3, 230, 254, 1)"
        text="黄金口污水厂"
        style="margin-right:0px"
      />
      <img src="../../../../assets/image/svg/location.png" alt="" style="width: 25px; height: 25px;margin-right:15px" @click="location('黄金口污水处理厂')">
      <lineLabel shapeColor="rgba(184, 235, 143, 1)" text="太子湖污水厂" />
      <img src="../../../../assets/image/svg/location.png" alt="" style="width: 25px; height: 25px; " @click="location('南太子湖污水处理厂')" >

    </div>
    <div style="height: calc(100% - 80px)">
      <div id="szy1" style="width: 100%; height: 100%"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import tablleBar from "@/components/project/tablleBar.vue";
import { useOptions } from "@/hook/useOptions";
import axios from "axios";
import { useFunc } from "@/hook/useFunc";

const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.jsgl.szy1;
  } catch (error) {}
  return data;
});
let myChart: any;

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        series: [{ data: val[0] },{ data: val[1] }],
      });
    }
  }
);
const location=(name:any)=>{
  const apiUrl = import.meta.env.VITE_SERVER_URL;

  axios
      .get(apiUrl + '/build/getSewageInfo', {
        params: {
          name: name,
        },
      }).then((res:any)=>{
       useFunc().jumpDetail(res.data.data[0],name)
      })
}
onMounted(() => {
  let option: any = {
    color: colorSingleList,
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      backgroundColor: "rgba(28,64,81,0.7)",
        textStyle: {
          color: "white",
          fontSize: 20,
        },
      extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",

    },
    grid: {
      left: "5%",
      right: "5%",
      bottom: "3%",
      top: "15%",
      containLabel: true,
    },
    //你的代码
    xAxis: {
      type: "category",
      data: useOptions().year(),
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "#667A8E",
        },
      },
      axisLabel: {
        textStyle: {
          fontSize: 20,
          color: "#667A8E",
        },
      },
      axisTick: {
        show: false,
      },
    },
    yAxis: [
      {
        name: "m",
        type: "value",
        nameTextStyle: {
          color: "#8994A3",
          fontSize: 20,
        },
        axisLabel: {
          fontSize: 20,
          color: "#667A8E",
          formatter: "{value}" + "",
        },
        splitLine: {
          // 配置分割线
          show: true,
          lineStyle: {
            color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
            type: "solid", // 实线
          },
        },
      },
    ],
    series: [
      {
        name: "",
        type: "line",
        data: [],
        color: "rgba(3, 230, 254, 1)",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(3, 230, 254, 0.8)", // 颜色渐变起始颜色
              },
              {
                offset: 1,
                color: "rgba(3, 230, 254, 0)", // 颜色渐变结束颜色
              },
            ]),
          },
        },
      },
      {
        name: "",
        type: "line",
        data: [],
        color: "rgba(184, 235, 143, 1)",
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(184, 235, 143, 0.8)", // 颜色渐变起始颜色
              },
              {
                offset: 1,
                color: "rgba(184, 235, 143, 0)", // 颜色渐变结束颜色
              },
            ]),
          },
        },
      },
    ],
  };

  myChart = echarts.init(document.getElementById("szy1") as HTMLElement);
  myChart.setOption(option);
});
</script>

<style></style>
